<script setup>
import { onMounted, ref } from 'vue'
import { insertCartAPI } from '@/apis/cart.js'
import { useshopProduct } from '@/stores/shopProduct'

const shopProduct = useshopProduct()
// 定义props
const props = defineProps({
	// 主标题
	shopData: {
		type: Object
	}
})

//商品详细信息
const shopMoreInfo = ref({})

//当前选择规格
let activeShopSku = ref(0)

//获取商品详情
// const getProdInfo=async()=>{
// 	let res=await shopProduct.getProdInfo(props.shopData.spuId)
// 	let {data}=res
// 	shopMoreInfo.value=data
// }

onMounted(() => {
	// console.log(props.shopData.hasStock)
	// console.log(props.shopData)
	// getProdInfo()
})

//首页直接添加购物车（默认添加一件）
// const addCar=async()=>{
// 	let formData={
// 		count: 1,
// 		oldSkuid:"",
// 		spuId: shopMoreInfo.value.spuId,
// 		skuId:shopMoreInfo.value.skus[activeShopSku.value].skuId
// 	}j'j'j
// 	let res=await insertCartAPI(
// 		formData
// 	)
// 	ElMessage({
// 		type: 'success',
// 		message: '添加成功'
// 	})
// }
</script>


<template>
	<div class="home-panel">
		<RouterLink :to="`/detail/${shopData.spuId}`">
			<div class="panel-skuImage">
				<img :src="shopData.mainImgUrl" alt="" />
				<div class="panel-hasStock" v-if="!shopData.hasStock">已售罄</div>
			</div>
		</RouterLink>

		<div class="panel-skuOtherName">
			<p class="panel-skuPrice">￥{{ (shopData.priceFee / 100).toFixed(2) }}</p>
			<p class="panel-skuScore">
				<span class="icon">⭐</span>
				<span class="info-typeNumber">4.3</span>
				<span class="line"></span>
				<span class="info-typeNumber">{{ shopData.saleNum }}</span>
				<span class="month-salesVolume">月销</span>
			</p>
		</div>
		<p class="panel-skuName" @click="getUserData">{{ shopData.spuName }}</p>

		<!-- <div class="panel-skuSpecifications">
		<div class="skuSpecifications-itemLastBox">
			<div :class="activeShopSku===index?'skuSpecifications-item active':'skuSpecifications-item'"
			v-for="(item,index) in shopMoreInfo.skus"
			:key="index"
			@click="activeShopSku=index"
			>
				{{item.skuName}}
			</div>
		</div>
			<div class="skuSpecifications-item">
				更多
			</div>
	</div> -->
		<!-- <div class="panel-BuyButtonBox">
			<RouterLink :to="`/detail/${shopData.spuId}`">
				<div class="addCar panel-button" @click="addCar()">加入购物车</div>
			</RouterLink>
			<RouterLink :to="`/detail/${shopData.spuId}`">
				<div class="purchase panel-button">购买</div>
			</RouterLink>
		</div> -->
	</div>
</template>

<style scoped lang='scss'>
@media (max-width: 1750px) {
	.line {
		width: 0px;
		height: 16px;
		border: 1px solid #c8c9cb;
		margin: 0 8px;
		display: none;
	}
	.month-salesVolume {
		color: #c8c9cb;
		margin-left: 8px;
		display: none;
	}
}
@media (max-width: 1522px) {
	.line {
		width: 0px;
		height: 16px;
		border: 1px solid #c8c9cb;
		margin: 0 8px;
		display: none;
	}
	.month-salesVolume {
		color: #c8c9cb;
		margin-left: 8px;
		display: none;
	}
	.info-typeNumber {
		position: relative;
		top: 1px;
		display: none;
	}
	.icon {
		margin-right: 6px;
		display: none;
	}
}
.home-panel {
	width: 20%;
	margin-bottom: 40px;
	padding: 0 1%;
	/* flex: 1; */

	/* &:last-child:nth-child(4n - 2) {
		margin-right: 807px;
	}

	&:last-child:nth-child(4n - 1) {
		margin-right: 403.5px;
	} */
	.panel-skuImage {
		width: 100%;
		height: 284px;
		overflow: hidden;
		margin-bottom: 32px;
		background-color: #f4f4f4;
		position: relative;
		img {
			width: 100%;
			height: auto;
		}
		.panel-hasStock {
			position: absolute;
			width: 141px;
			height: 85px;
			background: rgba(26, 30, 38, 0.3);
			border-radius: 133px 133px 133px 133px;
			line-height: 85px;
			text-align: center;
			font-weight: bold;
			font-size: 19px;
			color: #ffffff;
			top: calc((100% - 85px) / 2);
			left: calc((100% - 141px) / 2);
		}
	}
	.panel-skuName {
		margin-top: 20px;
		width: 100%;
		height: 72px;
		font-weight: 400;
		font-size: 21px;
		color: rgba(102, 102, 102, 1);
		line-height: 36px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		max-width: 400px;
		text-align: center;
	}
	.panel-skuOtherName {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 28px;
		margin-top: 11px;
		.panel-skuScore {
			display: flex;
			align-items: center;
			line-height: 28px;
			span {
				font-weight: bold;
				font-size: 19px;
			}
			.info-typeNumber {
				position: relative;
				top: 1px;
			}
			.icon {
				margin-right: 6px;
			}
			.line {
				width: 0px;
				height: 16px;
				border: 1px solid #c8c9cb;
				margin: 0 8px;
			}
			.month-salesVolume {
				color: #c8c9cb;
				margin-left: 8px;
			}
		}
	}
	.panel-skuPrice {
		height: 32px;
		font-family: Lexend, Lexend;
		font-weight: bold;
		font-size: 21px;
		color: #eb2606;
		line-height: 32px;
		text-align: left;
		margin: 27px 0;
	}
	.panel-skuSpecifications {
		width: 100%;
		height: 43px;
		display: flex;
		justify-content: space-between;
		margin-bottom: 27px;
		.skuSpecifications-itemLastBox {
			flex: 1;
			display: flex;
			overflow: auto;
			.skuSpecifications-item {
				margin-right: 10px;
			}
		}

		.skuSpecifications-item {
			box-sizing: content-box;
			padding: 9px 13px;
			border-radius: 5px 5px 5px 5px;
			display: flex;
			align-items: center;
			font-weight: bold;
			font-size: 16px;
			background: #f4f4f4;
			border: 1px solid #f4f4f4;
			flex-shrink: 1;
			&.active {
				border: 1px solid #c30d23;
				color: #c30d23;
				background-color: rgba(195, 13, 35, 0.1);
			}
		}
	}
	.panel-BuyButtonBox {
		width: 100%;
		height: 53px;
		.panel-button {
			height: 100%;
			float: left;
			text-align: center;
			line-height: 53px;
			width: 50%;
			font-family: Lexend, Lexend;
			font-weight: 500;
			font-size: 19px;
			color: #ffffff;
		}
		.addCar {
			background: #d2a36c;
			border-radius: 3px 0px 0px 3px;
		}
		.purchase {
			background: #c30d23;
			border-radius: 0px 3px 3px 0px;
		}
	}
}
</style>